<template>
	<view class="gy-button" :class="[props.mode === 'inline' ? 'inline' : '', props.type, props.disabled ? 'disabled' : '']" :style="[props.customStyle]" @click.stop="clickFn">
        <view v-if="props.btnIcon && props.btnIconPosition === 'left'" class="gy-button-icon-left" :class="props.btnIcon"></view>
		<slot>{{ btnText }}</slot>
        <view v-if="props.btnIcon && props.btnIconPosition === 'right'" class="gy-button-icon-right" :class="props.btnIcon"></view>
	</view>
</template>

<script lang="ts" setup>
	
	const emits = defineEmits(["click", "click.stop"]);
    const props = defineProps({
		disabled: {
    		type: Boolean,
    		default: false
    	},
    	mode: {
    		type: String,
    		default: "inline"
    	},
    	type: {
    		type: String,
    		default: "primary"
    	},
    	customStyle: {
    		type: Object,
    		default: () => {}
    	},
        btnText: {
            type: String,
            default: "按钮"
        },
        btnIcon: {
        	type: String,
        	default: ""
        },
        btnIconPosition: {
        	type: String,
        	default: "left"
        }
    });
	
	function clickFn(){
		if(!props.disabled){
			emits('click');
			emits('click.stop');
		}
	}
	
</script>

<style lang="scss" scoped>
	.gy-button{
	    @include flex-center-center;
	    width: 100%;
	    height: 90rpx;
	    border-radius: 45rpx;
	    padding: 0 45rpx;
	    color: var(--gy-text-color-primary);
	    font-size: var(--gy-font-size-medium);
	    .gy-button-icon-left{
	        margin-right: 10rpx;
	    }
	    .gy-button-icon-right{
	        margin-left: 10rpx;
	    }
	}
	.gy-button.disabled{
		opacity: 0.6 !important;
	}
	.gy-button:active{
	    opacity: 0.8;
	}
	.gy-button.inline{
	    display: inline-flex;
	    width: auto;
	    height: 80rpx;
	    border-radius: 40rpx;
	    padding: 0 40rpx;
	}
	.gy-button.primary{
	    font-size: var(--gy-font-size-medium);
	    background: linear-gradient(315deg, #4E9E51 0%, #63B566 100%);
	    box-shadow: 0px 3px 6px #E3F7E3;
	    color: #ffffff;
	}
	.gy-button.blue{
	    border: 1px solid #1677FF;
	    background: #1677FF;
	    box-shadow: none;
	    color: #fff;
	}
	.gy-button.secondary{
	    border: 1px solid #CBCFDF;
	    background: #fff;
	    box-shadow: none;
	    color: var(--gy-text-color-primary);
	}
	.gy-button.cancellation{
	    background: var(--gy-page-bg-color);
	    color: var(--gy-text-color-primary);
	}
	.gy-button.warn{
	    background: var(--gy-color-error);
	    color: var(--gy-card-bg-color);
	}
	.gy-button.remind{
	    background: var(--gy-color-warning);
	    color: var(--gy-card-bg-color);
	}
	.gy-button.success{
	    background: var(--gy-color-success);
	    color: var(--gy-card-bg-color);
	}
</style>